<template>
  <div class="resource-manager-tree">
    <el-tree
      id="el-tree"
      :data="data"
      show-checkbox
      node-key="id"
      accordion
      :props="defaultProps"
      @node-click="handleNodeClick"
      style="font-size: 13px"
      @node-contextmenu="handleNodeContextMenu"
    >
      
    </el-tree>

    <WmcDialog
      v-if="treeNodeData"
      :dialogVisible="dialogModuleManagerVisible"
      title="模块管理"
      width="600px"
      @close="closeDialog('module')"
      @handleConfirm="handleConfirm('module')"
    >
      <template #info>
        <ModuleManagerVue
          :projectName="treeNodeData?.id"
          @updateProjectModules="updateProjectModules"
        ></ModuleManagerVue>
      </template>
    </WmcDialog>

    <WmcDialog
      :dialog-visible="dialogGenerationVisible"
      :title="title"
      width="450px"
      @close="closeDialog('generation')"
      @handleConfirm="handleConfirm('generation')"
    >
      <template #info>
        <template v-if="treeNodeData?.outputUrl">
          <el-checkbox
            v-model="disableUrl"
            style="float: left; margin-bottom: 10px"
            @change="changeCheck"
            >是否使用默认路径</el-checkbox
          >
          <div style="clear: both"></div>
        </template>
        <el-form-item label="生成路径：">
          <el-input v-model="outputUrl" :disabled="disableUrl">
            <template #append>
              <el-button
                :icon="FolderOpened"
                @click="getFileUrl"
                :disabled="disableUrl"
              ></el-button>
            </template>
          </el-input>
        </el-form-item>
      </template>
    </WmcDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive, toRefs, watch } from 'vue'
import { useStore } from '@/render/store/index'
import { IProjectsTreeState } from '@/render/store/projects/types'
import { createContentMenu } from '@/render/utils/createContentMenu'
import { projectMenuConfig } from '../config/projectMenu.config'
import { moduleMenuConfig } from '../config/moduleMenu.config'
import type Node from 'element-plus/es/components/tree/src/model/node'
import WmcDialog from '@/render/base-ui/dialog'
import ModuleManagerVue from '../../new-project/cmps/module-manager.vue'
import emitter from '@/render/utils/mitt'
import { ElMessage, ElMessageBox } from 'element-plus'
// import { Folder, Document, Chicken } from '@element-plus/icons-vue'
// import { projects2Tree } from '@/render/utils/project2Tree'
// import { diff } from '../utils/diffUpdate'
// import { FolderOpened } from '@element-plus/icons-vue'
// import router from '../../../router'
const { dialog } = require('electron').remote

export default defineComponent({
  components: {
    WmcDialog,
    ModuleManagerVue,
    // Folder,
    // Document
  },
  data() {
    return {
      data: [
        {
          label: 'CompuMethod',
          id:1,
          children: [
            {
              label: 'identical',
              id:11
            },
            {
              label: 'linear',
              id:12 
            },
            {
              label: 'scale-linear',
              id:13 
            },
            {
              label: 'text-table',
              id:14 
            },
            {
              label: 'linear-and-text-table',
              id:15 
            },
            {
              label: 'bitfield-text-table',
              id:16 
            }
          ]
        },
        {
          label: 'Units',
          id:2, 
          children: [
            {
              label: 'unit',
              id:21
            },
            {
              label: 'unitgroup',
              id:22
            }
          ]
        },
        {
          label: 'physical',
          id:3,
          children: [
            {
              label: 'physical-dimention',
             id:31
            },
            {
              label: 'mapping-set',
              id:32
            }
          ]
        },
        {
          label: 'data-type',
          id:4,
          
          children: [
            {
              label: 'sw-base-type',
              id:41
            },
            {
              label: 'application-data-type',
              id:42
            },
            {
              label: 'implementation-data-type',
              id:43
            }
          ]
        },
        {
          label: 'portinterface',
          id:5,
          children: [
            {
              label: 'sender-receiver-portinterface',
          id:51
            },
            {
              label: 'client-server-portinterface',
          id:52
            },
            {
              label: 'mode-switch-interface',
          id:53
            },
            {
              label: 'trigger-interface',
          id:54
            },
            {
              label: 'portinterface-mapping-set',
          id:55
            }
          ]
        },
        {
          label: 'swc-component',
          id:6,
          children: [
            {
              label: 'atomid-swc',
              id:61,
              children: [
                {
                  label: 'application-swc',
                id:611
                }
              ]
            },
            {
              label: 'composition-swc',
              id:62,
              children: [
                {
                  label: 'ex-swc',
                   id:621
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label' 
       
      }
    }
  },
  methods: {
    handleNodeClick(label: any) {
      console.log(label.label)
       this.$router.push({name:label.label})

      console.log("tree")
      

    }
  }
})
</script>

<style scoped lang="less">
@import '../../../assets/style/index';
.resource-manager-tree {
  background-color: @content-background-color;
  height: calc(~'100% - @{main-row-height}');
  padding-top: 5px;
  .el-tree {
    color: #2b2a2a;
    height: 100%;
    .tree-item {
      padding-left: 5px;
    }
    ::v-deep .is-current {
      color: #606266;
    }
    & > ::v-deep .el-tree-node .el-tree-node__content:hover {
      color: #606266;
    }
    .header {
      font-weight: bold;
    }
  }
  .dialogGenerate {
    .el-dialog__footer {
      margin-top: -20px;
    }
  }
}
</style>
